<script setup>
import { NConfigProvider, NInput } from 'naive-ui'
import useDeviceFlowStore from '../pinia.ts'
const flowStore = useDeviceFlowStore()
const isEdit = computed(() => flowStore.isEdit)
const props = defineProps(['node', 'deleteNode'])
const clickNode = () => {
  console.log('props', props.node)
}
const deleteEvent = () => {
  props.deleteNode(props.node)
}
// 主题配置， 修改默认样式，使用 naive ui 右下角插件可以配置
const themeOverrides = {
  Input: {
    borderFocus: '1px solid #409eff',
    borderHover: '1px solid #409eff',
    border: '1px solid #C8100E'
  }
}
</script>

<template>
  <div style="padding: 20px" class="input-node">
    <el-button v-if="isEdit" link @click="deleteEvent" class="shanshu-btn-hover"
      ><Icon icon="svg-icon:icon-hua-cancel" size="10" color="#8F919E"
    /></el-button>
    <n-config-provider v-if="isEdit" :theme-overrides="themeOverrides">
      <n-input
        v-model:value="node.data.label"
        style="width: 200px"
        size="small"
        type="textarea"
        placeholder="请输入"
        :autosize="true"
        class="input-no-edit nodrag"
      />
    </n-config-provider>
    <div v-else style="width: 200px; color: #082050">
      {{ node.data.label }}
    </div>
  </div>
</template>

<style scoped lang="scss">
.input-node {
}
.shanshu-btn-hover {
  position: absolute;
  right: 20px;
  z-index: 9999;
}
</style>
